

function getSubTableComponent(headerTitles,colFieldKeys,pageMode) {
  if(colFieldKeys==undefined){
    alert("配置错误,请传递每列属性对应的key数组,例如: ['name','age','gender','address'...]")
    return
  }
  var headerDomStr=''
   if(headerTitles!=undefined && headerTitles.length>0){
    if(pageMode=='edit'){
      headerTitles.push("操作")
    }
      headerDomStr='<tr> <th v-for="item in headerTitles" >{{item}}</th> </tr>'
   }
  
 
  // if(rowDatas!=undefined){
  //   contentDomStr="<tr>"
  //   for(var i=0;i<rowDatas.length;i++){
  //     for(var x in rowDatas[i]){
  //       contentDomStr+="<td>{{rowDatas[i][x]}}</td>"
  //     }
  //   }
  //   contentDomStr="<tr>"
  // }
  var contentDomStr=' <slot></slot>'
  if(colFieldKeys!=undefined && colFieldKeys.length>0){
    var controlCol=''
    var editflag='readonly'
    var inputClass='class="readonlyInput"'
    if(pageMode=='edit'){
      var inputClass='class="editInput"'
      editflag=''
      controlCol="<td><button class='rowDeleteButton'>删除</button></td>"
    }
    contentDomStr='<template v-for="item in tabledata"> <tr> <td v-for="ck in colFieldKeys" :ref="ck" ><input '+inputClass+' '+editflag+' v-model="item[ck]" ></input>  </td> '+controlCol+'</tr></template>'
  }

  console.log("?",contentDomStr)



   Vue.component('xcolumns', getXcolumnsComponent());

  // var xcolumnsComponent=getXcolumnsComponent();
  // console.log("xc:",xcolumnsComponent)

  var vc= Vue.extend({
    name: 'sub-table',
    template: ' <div><table><slot name="header"></slot>'+headerDomStr+contentDomStr+' </table>     <slot></slot>   </div> ',
    props:['tabledata'],
    // methods: {
    //   handleChange(event) {
    //    console.log("改变了")
    //     console.log(event.target.value)
    //     var d_rel_Arr=event.target.getAttribute("d_rel").split("_")
    //     console.log(d_rel_Arr)


    //      this.$props.tabledata[d_rel_Arr[0]][d_rel_Arr[1]] = event.target.value; // 更新输入值
    //     // console.log("值改变:",event.target.value)
    //   }
    // },
    // render(h) {
    //   console.log("####hhhhhhhhhhhhhhhh######")
    //   var sArr=this.$slots.columns
    //   var slotMap={}
    //   console.log(sArr)
    //   sArr.filter((x)=>x.componentOptions!=undefined&&x.componentOptions.tag=='xcolumns').forEach(element => {
    //     console.log(element.componentOptions)
    //     slotMap[element.componentOptions.propsData.prop]=element.componentOptions
    //   });
    //   // if(this.$props.tabledata.length>0){
    //   //   console.log(this.$props.tabledata)
    //   // }
    //   console.log("####hhhhhhhhhhhhhhhh######")
    //   console.log(slotMap)

    //   var frows=[]
    //   //标题行
    //   var hTitleRow
    //   if(this.$slots.header==undefined){
    //     var hTitleThs=[]
    //      for(var x=0;x<headerTitles.length;x++){
    //       hTitleThs.push(h('th',{},headerTitles[x]))
    //      }
    //      console.log(hTitleThs)
    //      hTitleRow=h('thead',{},[h('tr',{},hTitleThs)])
    //    }else{
    //     hTitleRow=h('thead',{},this.$slots.header)
    //    }
    //    frows.push(hTitleRow)

    //   // 内容行
    //   for(var x=0;x<this.$props.tabledata.length;x++){
    //     var tmpTdArr=[]
    //     var rowData=this.$props.tabledata[x]
    //     for(var i=0;i<colFieldKeys.length;i++){
    //       //tmpTdArr.push(h('td', {},h("input",{value:this.tabledata[x][colFieldKeys[i]]},this.tabledata[x][colFieldKeys[i]])))
    //       //console.log(this.$props.tabledata[x][colFieldKeys[i]])   slotMap[colFieldKeys[i]]
    //       var ck=colFieldKeys[i]
    //       var slotvc=slotMap[ck]
    //       if(slotvc!=null){
    //         var nvc=JSON.parse(JSON.stringify(slotvc))
    //         //nvc.propsData.data=rowData[ck]
    //         //nvc.children[0].text=nvc.children[0].text+"<input v-model='data["+ck+"]' ></input>"
    //         tmpTdArr.push(h('td',{},[slotvc]))
    //         //var nvc=getXcolumnsComponent('<input v-model="rowData['+colFieldKeys[i]+']" ></input>',this.$props.tabledata[x])

    //         //tmpTdArr.push(h('td',{},[nvc]))
    //         continue
    //       }

    //       if(pageMode=='edit'){
    //         tmpTdArr.push(h('td',{},
    //         [h("input",{attrs: { type: 'text',d_rel:x+"_"+ck },domProps:{value:rowData[ck]},on: {change: this.handleChange }
    //           })]
    //         ))
    //       }else{
    //         tmpTdArr.push(h('td',{},
    //         [h("div",{},rowData[ck])]
    //         ))
    //       }
    //     }
    //     frows.push(h('tr',{},tmpTdArr))
    //   }
    //   console.log(frows)

    //   return h('div', {
    //     class: ['container'],
    //     style: {
    //     }
    //   }, [
    //     // 创建子元素
    //     h('table', {},frows),
        
    //   ]);
    // },
    data: function () {
      return {
        title: 'Sub Table',
        headerTitles:headerTitles,
        colFieldKeys:colFieldKeys
      }
    },
    // components:{
    //   "xcolumns":xcolumnsComponent
    // }
    mounted:function(){
      //this.$el+="<h1>改改改</h1>"
      // console.log("##########")
      // console.log(this.$el)
      // // console.log($(this.$el).find("td[vid='hospitalLevel']"))
      // //this.$el.innerHtml="<div>稿子</div>"


      // var sArr=this.$slots.default
      // console.log(typeof sArr)
      // sArr.filter((x)=>x.tag=='xcolumns').forEach(element => {
      //   console.log(element.data.attrs)
      // });
      // var elements = this.$refs['hospitalLevel'];
      // console.log(elements)

      // console.log("--------beforeMount>>>>",this.$slots)
    },
    updatedxxxxxxx :function(){
      //this.$el+="<h1>改改改</h1>"
      // var newParagraph = document.createElement("p");
      // newParagraph.textContent = "这是要追加的内容s1";
     

      // var elements = this.$refs['hospitalLevel'];
      // console.log(elements)
      // for (var i = 0; i < elements.length; i++) {
      //    // elements[i].innerHTML =" <textarea  v-model='tabledata[i][hospitalLevel]' ></textarea>"
      //    elements[i].innerHTML="????"
      // }


      
      // console.log(this.$el)
      // console.log("subTable加载完成",this.$slots)
    },
  });   

  console.log("????????",vc.$children)


  return vc

}